<template>
  <div class="root">
    <div class="top">
      <span>灵医</span>
    </div>
    <div class="mid">
      <Card_message v-for="(item,index) in messages" 
        :key="index" :message="item"/>
    </div>
    <div class="bottom">
      <div class="input">
        <el-input
          v-model="text"
          style="width: 1800px;font-size: 20px;"
          :autosize="{ minRows: 4, maxRows: 4 }"
          type="textarea"
          placeholder="请输入问题"
          @keyup.enter="sendMessage">
        </el-input>
        <el-button type="primary" @click="sendMessage" :disabled="loading">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Card_message from "@/components/Card_message_User.vue";
import { reqChat } from "@/api/chat";

let messages = ref([]);
let text = ref('');
let loading = ref(false); // 加载状态

const sendMessage = async () => {
  if (text.value.trim()) {
    const message = {};
    message.value = text.value;
    message.isUser = true;
    message.type = 'font';
    messages.value.push(message);

    // 添加AI等待消息
    const pendingMessage = {
      content: '正在查询中...',
      isUser: false,
      type: 'font',
      isLoading:true
    };
    messages.value.push(pendingMessage);

    const uid = localStorage.getItem('UID');
    text.value = '';

    loading.value = true; // 开始加载并禁用发送按钮
    try {
      let res = await reqChat(parseInt(uid), message.value);
      const pendingIndex = messages.value.findIndex(msg => msg.isLoading);
      if (res.data.code == 1) {
        messages.value.splice(pendingIndex,1,{
          value:res.data.data,
          isUser:false,
          type:'font',
          isLoading:false
        })//替换AI等待消息
        // console.log(pendingIndex)
      } else {
        messages.value.splice(pendingIndex,1,{
          value: res.data.msg || '请求失败',
          isUser: false,
          type: 'font',
          isLoading: false
        })//替换AI等待消息
        // console.log(pendingIndex)
      }
    } catch (error) {
      // console.error('请求失败:', error);
      const pendingIndex = messages.value.findIndex(msg => msg.isLoading);
      message.value = '请求失败，请稍后重试';
      message.isUser = false;
      message.type = 'font';
      messages.value.splice(pendingIndex,1,message)//替换AI等待消息
      // console.log(pendingIndex)
    } finally {
      loading.value = false; // 结束加载
    }
  }
};
</script>

<style lang="scss" scoped>
.root{
  // width: 1920px;
  min-width: 1810px;
  height: auto;
  position: relative;
  .top{
    background-color: #bbb;
    height: 50px;
    // width: 1900px;
    width: 95%;
    padding-left: 30px;
    span{
      font-size: 28px;
      line-height: 50px;
    }
  }
  .mid{
    min-height: 700px;
    padding-left: 35px;
    padding-right: 80px;
  }
  .bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    width: 1800px;
    min-height: 50px;
    margin-left: 30px;
    position: absolute;
    bottom: -120px;
    .input{
      display: flex;
      position: relative;
      width: 60%;
      height: 100%;
      margin-left: -20px;
      .el-button{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        position: absolute;
        right: 20px;
        bottom: 10px;
        border-radius: 12px;
        height: 40px;width: 70px;
      }
      .el-textarea{
        ::v-deep .el-textarea__inner{
          border-radius: 20px;
        }
      }
    }
    .upload-demo{
      ::v-deep .el-upload-dragger{
        width: 60px;
        height: 70px;
        z-index: 999;
        border-radius: 20px;
        background-color: rgba(0,0,0,0);
        border: none;
        display: flex;
        justify-content: center;
        position: absolute;
        top:95%;
        left:2px
      }
      ::v-deep ul{
        position: absolute;
        z-index: 999;
        top:130%;
        left:15px
      }
      .img{
        margin-top: 20px;
      }
    }
    span{
      position: absolute;
      z-index: 999;
      top:115%;
      left:60px;
      font-size: 18px;
      color: #0984e3;
    }
  }
}
</style>
